// 搜索框
import React, { Component, createRef } from 'react';
import { connect } from 'react-redux'
import {
  getSearchData,
  disabledBtn
} from '../../store/actions/searchAction'

const maps = state => ({
  searchStatus: state.getIn(['search', 'searchStatus'])
})

@connect(maps, { getSearchData,disabledBtn })
class SearchInput extends Component {
  constructor(props) {
    super(props);
    // this.kw = createRef()
  }


  searchFn = () => {
    // 搜索关键词
    let kw = this.kw.value
    if (kw !== '') {
      kw = kw.replace(/^\s*/, '').replace(/\s*$/, '')
      // 按钮禁用
      this.props.disabledBtn()
      // 进行ajax请求
      this.props.getSearchData(kw)
    } else {
      // 清空
    }
  }


  render() {
    return (
      <div>
        {/* <input type="text" ref={this.kw} /> */}
        <input type="text" ref={el => this.kw = el} />
        <button onClick={this.searchFn} disabled={this.props.searchStatus}>搜索</button>
      </div>
    );
  }
}

export default SearchInput;